<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="./assets/css/iconfont.css">
    <link rel="icon" href="https://www.xuhxin.cn/file/%E6%A1%83%E5%BF%83.png">
    <script type="text/javascript" src="https://www.xuhxin.cn/file/Personal-home-page/assets/js/shubiao.js"></script>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background: linear-gradient(to top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
        background-repeat: no-repeat;
        background-size: cover;
    }
    * {
    margin: 0;
    padding: 0;
  }
  a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
  }
  .header {
    width: 400px;
    height: 450px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    margin: 100px 0 0 200px;
    padding: 20px;
  }
  .header h2 {
    font-size: 24px;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.7);
  }
  .header > label {
    margin-top: 40px;
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header > label span {
    font-size: 24px;
    color: #fff;
  }
  .header > label input {
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 0 20px;
    background-color: rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
    outline: none;
    width: 240px;
    height: 30px;
    font-size: 18px;
  }
  .header > div {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    width: 325px;
  }
  .header > div button {
    width: 100px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 12px;
    font-size: 18px;
    color: #fff;
  }
</style>
 
<body>
 
    <div class="header">
        <h2>登录</h2>
        <label for="username"><span>用户名：</span><input type="text" id="use"></label>
        <br>
        <label for="password"><span>密码:</span><input type="password" id="pwd"></label>
        <div>
            <button class="blog-button" onclick="login()">登录</button>
        </div>
    </div>
    <img class="mouse" src="https://www.xuhxin.cn/file/Personal-home-page/123.png" alt="">
 
</body>
<script>
    function login() {
        //获取事件的value 
        let username = document.querySelector('#use').value;
        let password = document.querySelector('#pwd').value;
        //这里调用存入本地的数据
        Date(username, password);

    }
    function Date(username, password) {
        localStorage.setItem(username, JSON.stringify({
            username,
            password,
            tag: false
        }))
        if (username === '09171016' || password === 'xiaoxinainazi') {
            window.location.href = "./index.html";
        }else if (username !== '09171016') {
            alert('用户名错误')
        } else if (password !== 'xiaoxinainazi') {
            alert('密码错误')
        }else if (username === '' || password === '') {
            alert('请输入用户名和密码')
        }

    }

</script>
 <style>
         *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
            cursor: none;           
        }

        .mouse{
        width: 50px;
        height: 50px;
        border-radius: 50%;;
        position: fixed;
        left: -200px;
        z-index: 1000;
        pointer-events: none;
    }

    </style>
    <script>
         var mouse = document.querySelector('.mouse');
    window.addEventListener('mousemove',function(event){    
        mouse.style.left = event.clientX - mouse.offsetWidth/2 + 'px' ;
        mouse.style.top = event.clientY -mouse.offsetHeight/2 + 'px';       
    })
    </script>
</html>